<template>
	<view>
		<view class="questionnaire" v-for="(items,indexs) in List" v-if="indexs===showIndex" :key="indexs">
			<view class='qn-top'>
				<view class="qn-t-index">
					<image src="../../static/img/jiao.png"></image>
					<view class="qn-t-i-biao">{{indexs+1}}</view>
				</view>
				<view class="qn-t-title">
					{{items.question}}
				</view>
			</view>
			<view  class="qn-content">
				<view class="qn-c-item" v-for="(item,index) in items.answer" :key="index" @tap="handleSwitch(indexs,index)">
					<view class="qn-c-i-img">
						<image src="../../static/img/nochose.png" v-if="!(index===choseItem)"></image>
						<image src="../../static/img/chose.png" v-if="index===choseItem"></image>
					</view>
					<view class="qn-c-i-txt">
							{{item.answer}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		name:'questionnaireCard',
		props:{
			List:{
				type:Array
			}
		},
		data(){
			return {
				checkList:[],
				showIndex:0,
				choseItem:-1
			}
		},
		watch:{
			List(oldVal,newVal){
				
			}
		},
		methods:{
			handleSwitch(indexs,index){
				this.choseItem=index
				setTimeout(()=>{
					if(this.showIndex<this.List.length-1){
						++this.showIndex
						this.choseItem=-1
					}else{
						this.showIndex=this.List.length-1
					}
				},500)	
				if(this.checkList.length<this.List.length){
					this.checkList.push("r-group"+'-'+indexs+'='+(index+1))
				}
			
				this.$emit("handleChange",this.checkList)
			}
		}
	    
	}
</script>

<style scope lang="scss">
	 .questionnaire{
		 border-radius: 20rpx;
		 overflow: hidden;
		 margin:30rpx auto 0 ;
		 padding: 0 28rpx 0 0;
		 width: 690rpx;
		 background-color: #ffffff;
		 .qn-top{
			 width: 100%;
			 display: flex;
			 // justify-content: space-between;
			 .qn-t-index{
				 position: relative;
				 .qn-t-i-biao{
					 position: absolute;
					 top: 20rpx;
					 left: 20rpx;
					 color: #ffffff;
				 }
				 image{
					 width: 80rpx;
					 height: 80rpx;
				 }
			 }
			 .qn-t-title{
				 padding: 29rpx 0 0 25rpx;
				 font-size: 30rpx;
			 }
		 }
	     .qn-content{
			 width: 100%;
			 margin-top: 26rpx;
			 font-size: 30rpx;
			.qn-c-item{
				width: 100%;
				display: flex;
				.qn-c-i-img{
					padding: 20rpx 30rpx 20rpx 20rpx;
				    image{
						display: block;
						width: 44rpx;
						height:44rpx;
					}
				}
				.qn-c-i-txt{
				   padding:20rpx 0 30rpx 0;
				   border-bottom: solid 1px #F1F1F1;
				   flex-grow: 1;
				}
			}
		 }
	 }
</style>
